<template>
	<jk-card>
		<el-tabs v-model="activeName" type="border-card">
			<el-tab-pane label="基本信息" name="basic">
				<basic-info-form ref="basicInfo" :info="table" />
			</el-tab-pane>
			<el-tab-pane label="字段信息" name="cloum">
				<jk-table ref="dragTable" :data="columns" :height="tableHeight - 60">
					<vxe-column title="字段列名" field="columnName" width="160px" fixed="left" />
					<vxe-column title="字段描述" min-width="120px" fixed="left">
						<template slot-scope="scope">
							<el-input v-model="scope.row.columnComment" size="mini"></el-input>
						</template>
					</vxe-column>
					<vxe-column
						title="物理类型"
						field="dataType"
						min-width="10%"
						:show-overflow-tooltip="true"
					/>
					<vxe-column title="Java类型" min-width="11%">
						<template slot-scope="scope">
							<el-select v-model="scope.row.javaType" size="mini">
								<el-option label="Long" value="Long" />
								<el-option label="String" value="String" />
								<el-option label="Integer" value="Integer" />
								<el-option label="Double" value="Double" />
								<el-option label="BigDecimal" value="BigDecimal" />
								<el-option label="Date" value="Date" />
								<el-option label="Boolean" value="Boolean" />
								<el-option label="LocalDate" value="LocalDate" />
								<el-option label="LocalDateTime" value="LocalDateTime" />
							</el-select>
						</template>
					</vxe-column>
					<vxe-column title="java属性" min-width="10%">
						<template slot-scope="scope">
							<el-input v-model="scope.row.javaField" size="mini"></el-input>
						</template>
					</vxe-column>
					<vxe-column title="插入" :width="50" align="center">
						<template slot-scope="scope">
							<el-checkbox v-model="scope.row.createOperation" size="mini" true-label="true" false-label="false"></el-checkbox>
						</template>
					</vxe-column>
					<vxe-column title="编辑" :width="50" align="center">
						<template slot-scope="scope">
							<el-checkbox v-model="scope.row.updateOperation" size="mini" true-label="true" false-label="false"></el-checkbox>
						</template>
					</vxe-column>
					<vxe-column title="列表" :width="50" align="center">
						<template slot-scope="scope">
							<el-checkbox v-model="scope.row.listOperationResult" size="mini" true-label="true" false-label="false"></el-checkbox>
						</template>
					</vxe-column>
					<vxe-column title="查询" :width="50" align="center">
						<template slot-scope="scope">
							<el-checkbox v-model="scope.row.listOperation" size="mini" true-label="true" false-label="false"></el-checkbox>
						</template>
					</vxe-column>
					<vxe-column title="查询方式" min-width="10%">
						<template slot-scope="scope">
							<el-select v-model="scope.row.listOperationCondition" size="mini">
								<el-option label="=" value="=" />
								<el-option label="!=" value="!=" />
								<el-option label=">" value=">" />
								<el-option label=">=" value=">=" />
								<el-option label="<" value="<>" />
								<el-option label="<=" value="<=" />
								<el-option label="LIKE" value="LIKE" />
								<el-option label="BETWEEN" value="BETWEEN" />
							</el-select>
						</template>
					</vxe-column>
					<vxe-column title="允许空" :width="60" align="center">
						<template slot-scope="scope">
							<el-checkbox v-model="scope.row.nullable" size="mini" true-label="true" false-label="false"></el-checkbox>
						</template>
					</vxe-column>
					<vxe-column title="显示类型" min-width="12%">
						<template slot-scope="scope">
							<el-select v-model="scope.row.htmlType" size="mini">
								<el-option label="文本框" value="input" />
								<el-option label="文本域" value="textarea" />
								<el-option label="下拉框" value="select" />
								<el-option label="单选框" value="radio" />
								<el-option label="复选框" value="checkbox" />
								<el-option label="日期控件" value="datetime" />
								<el-option label="图片上传" value="imageUpload" />
								<el-option label="文件上传" value="fileUpload" />
								<el-option label="富文本控件" value="editor" />
							</el-select>
						</template>
					</vxe-column>
					<vxe-column title="字典类型" min-width="12%">
						<template slot-scope="scope">
							<el-select v-model="scope.row.dictType" size="mini" clearable filterable placeholder="请选择">
								<el-option
									v-for="dict in dictOptions"
									:key="dict.id"
									:label="dict.name"
									:value="dict.type"
								/>
							</el-select>
						</template>
					</vxe-column>
					<vxe-column title="示例" min-width="10%">
						<template slot-scope="scope">
							<el-input v-model="scope.row.example" size="mini"></el-input>
						</template>
					</vxe-column>
				</jk-table>
			</el-tab-pane>
			<el-tab-pane label="生成信息" name="genInfo">
				<gen-info-form ref="genInfo" :info="table" :tables="tables" :menus="menus" />
			</el-tab-pane>
		</el-tabs>
		<el-form label-width="100px">
			<el-form-item style="text-align: center;margin-left:-100px;margin-top:10px;">
				<el-button type="primary" @click="onConfirmBtn()">提交</el-button>

				<el-button @click="close()">返回</el-button>
			</el-form-item>
		</el-form>
	</jk-card>
</template>
<script>
    import { getCodegenDetail, updateCodegen } from '@/api/infra/codegen';
    import { listAllSimple as listAllSimpleDictType } from '@/api/system/dict/type';
    import basicInfoForm from './basicInfoForm';
    import genInfoForm from './genInfoForm';
    import calHeight from '../../../mixins/cal-table-height';
    import { createTree, getFamily } from '../../../utils/jk/jk-tool';
    import { systemMenuList } from '../../../api/system/menu';

    export default {
        name: 'GenEdit',
        mixins: [calHeight],
        components: {
            basicInfoForm,
            genInfoForm
        },
        data() {
            return {
                // 选中选项卡的 name
                activeName: 'cloum',
                // 表格的高度
                tableHeight: document.documentElement.scrollHeight - 245 + 'px',
                // 表信息
                tables: [],
                // 表列信息
                columns: [],
                // 字典信息
                dictOptions: [],
                // 菜单信息
                menus: [],
                // 表详细信息
                table: {}
            };
        },
        created() {
            this.getDependentData();
        },
        methods: {
            async getDependentData() {
                const tableId = this.$route.params && this.$route.params.tableId;
                if (tableId) {
                    let originalData = [];
                    /** 查询菜单下拉列表 */
                    await systemMenuList({ types: [1, 2] }).then(res => {
                        if (res.data.status === 200) {
                            originalData = JSON.parse(JSON.stringify(res.data.res));
                            this.menus = [];
                            this.menus.push(...createTree(res.data.res, {}));
                        }
                    });
                    // 获取表详细信息
                    await getCodegenDetail(tableId).then(res => {
                        if (res.data.status === 200) {
                            this.table = res.data.res.table;
                            this.$set(this.table, 'menuIds', getFamily(originalData, this.table.parentMenuId).ids);
                            this.columns = res.data.res.columns;
                        }
                    });
                    /** 查询字典下拉列表 */
                    await listAllSimpleDictType().then(res => {
                        if (res.data.status === 200) {
                            this.dictOptions = res.data.res;
                        }
                    });
                }
            },
            /** 提交按钮 */
            onConfirmBtn() {
                const basicForm = this.$refs.basicInfo.$refs.basicInfoForm;
                const genForm = this.$refs.genInfo.$refs.genInfoForm;
                Promise.all([basicForm, genForm].map(this.getFormPromise)).then(res => {
                    const validateResult = res.every(item => !!item);
                    if (validateResult) {
                        const genTable = {};
                        genTable.table = Object.assign({}, basicForm.model, genForm.model);
                        genTable.columns = this.columns;
                        genTable.params = {
                            treeCode: genTable.treeCode,
                            treeName: genTable.treeName,
                            treeParentCode: genTable.treeParentCode,
                            parentMenuId: genTable.parentMenuId
                        };
                        updateCodegen(genTable).then(res => {
                            this.$message('修改成功！');
                            this.close();
                        });
                    } else {
                        this.$modal.msgError('表单校验未通过，请重新检查提交内容');
                    }
                });
            },
            getFormPromise(form) {
                return new Promise(resolve => {
                    form.validate(res => {
                        resolve(res);
                    });
                });
            },
            /** 关闭按钮 */
            close() {
                this.$tab.closeOpenPage({
                    path: '/infra/codegen',
                    query: { t: Date.now(), pageNum: this.$route.query.pageNum }}
                );
            }
        },
        mounted() {
            const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0];
            /* const sortable = Sortable.create(el, {
                handle: '.allowDrag',
                onEnd: evt => {
                    const targetRow = this.columns.splice(evt.oldIndex, 1)[0];
                    this.columns.splice(evt.newIndex, 0, targetRow);
                    for (const index in this.columns) {
                        this.columns[index].sort = parseInt(index) + 1;
                    }
                }
            });*/
        }
    };
</script>
